{{partial('public/header')}}
<!--main-->
<style>
/**设置头像**/
.user-icon-upload, .user-icon-update {
	margin-bottom: 30px;
	overflow: hidden;
	zoom: 1;
}
.user-icon-update {
	margin-bottom: 20px;
}
.item {
	margin-bottom: 10px;
}
.preview {
	float: left;
	overflow: hidden;
	width: 48px;
	height: 48px;
	margin-right: 10px;
	border: 1px solid #f0f0f0;
}
.preview2 {
	float: left;
	overflow: hidden;
	width: 160px;
	height: 160px;
	margin-right: 10px;
	border: 1px solid #f0f0f0;
}
.user-icon-upload .icon {
	float: left;
	margin: 1px 18px 1px 0;
}
.desc {
	overflow: hidden;
	zoom: 1;
	color: #666;
}
.upload {
	overflow: hidden;
	zoom: 1;
}
.facesuccess {
    background: none repeat scroll 0 0 #fffadc;
    border: 1px solid #faf3ca;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 10px;
}
.faceerror {
    background: none repeat scroll 0 0 #f2dede;
    border: 1px solid #ebccd1;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 10px;
    color: #b94a48;	
}
</style>
<script type="text/javascript" src="{{static_url('static/js/lib/imgsel.js')}}"></script>
<script>
var imgw, imgh;
function preview(b, d) {
    var c = 48 / d.width;
    var a = 48 / d.height;
	
    $("#preimg").css({
        width: Math.round(c * imgw) + "px",
        height: Math.round(a * imgh) + "px",
        marginLeft: "-" + Math.round(c * d.x1) + "px",
        marginTop: "-" + Math.round(a * d.y1) + "px"
    });
		
    if ($("#imgpos")) {
        $("#imgpos").attr("value", d.x1 + "_" + d.y1 + "_" + (d.x2 - d.x1)).attr("name", "imgpos")
    }
}
$(window).load(function() {
    if ($("#imgpos").length) {
        imgw = $("#bigimg").width();
        imgh = $("#bigimg").height();
        var a = $("#imgpos").attr("value").split("_");
        var b = (a[2] != "0") ? {
            x1: parseInt(a[0]),
            y1: parseInt(a[1]),
            x2: parseInt(a[0]) + parseInt(a[2]),
            y2: parseInt(a[1]) + parseInt(a[2])
        }: {
            x1: imgw > imgh ? (imgw - imgh) / 2 + 3 : 3,
            x2: imgw > imgh ? (imgw + imgh) / 2 - 3 : imgw - 3,
            y1: imgw > imgh ? 3 : (imgh - imgw) / 2 + 3,
            y2: imgw > imgh ? imgh - 3 : (imgh + imgw) / 2 - 3
        };
        $("#bigimg").imgAreaSelect($.extend(b, {
            aspectRatio: "1:1",
            onSelectChange: preview,
            onSelectBegin: preview,
            noNewSelect: "true",
			minHeight:48
        }))
    }
});
</script>
<div class="midder">
<div class="mc">
<h1>{{seo.title}}</h1>
<div class="cleft">
   {{partial('manage/edit_xbar')}}

<div style="font-size:14px; line-height:30px">请上传图标后才可以正常使用浏览网站^_^</div>

   {{flashSession.output()}}
    <div id="user-icon">
    <form enctype="multipart/form-data" method="post" name="lzform">
    <div style="display:none;"><input type="hidden" name="{{security.getTokenKey()}}" value="{{security.getToken()}}"></div>
    
    <div class="user-icon-upload">
      <div class="icon">
          <img id="bigimg" src="{{strGroup['icon_200']}}">
      </div>
    
      <div class="upload">
          <h2>从电脑中选择你喜欢的照片:</h2>
          <span class="pl">你可以上传JPG、JPEG、PNG文件，大小不超过 {{ik_setting.ik_attr_allow_size}} KB。</span>
          <div class="item">
          <input type="file" style="width:300px" accept="image/jpg, image/jpeg, image/png" name="picfile">
          </div>
          <input type="submit" class="submit"  value="上传照片" name="icon_submit">
      </div>
    </div>
    </form>
    <form enctype="multipart/form-data" method="post" name="setform" action="{{url('group/manage/seticonsmall/'~strGroup['groupid'])}}">
    <div class="user-icon-update">
        
        <h2>这是你在{{C('ik_site_title')}}上的小头像图标</h2>
        <div class="preview"><img id="preimg" src="{{strGroup['icon_200']}}"></div>        
        <div class="desc">随意拖拽或缩放大图中的虚线方格，预览的小图即为保存后的小头像图标。</div>
        <input type="hidden" value="0_0_0" name="imgpos" id="imgpos">
    </div>
    
    <div class="user-icon-buttons">
      <input type="submit" class="submit" value="保存小图设置" id="choose_submit" name="choose_submit">
    </div>
    </form>
    </div>
    
</div>
<div class="cright">

	 <p class="pl2">&gt; <a href="{{url('group/show/'~strGroup['groupid'])}}">返回{{strGroup['groupname']}}</a></p>
    <br>
                
    <h2 class="mt75">给你的小组扮酷!</h2>
    如果上传后的图片未更新，请刷新页面。
    <br><br>
    上传适合小组主题的照片，随意拖拽或调整大图中的虚线方格，预览的图片是即将保存的头像图标放大后的效果。
    <br><br>
    为了让小组图标在所有地方都显示清晰，请上传尺寸不小于200x200像素的图片。
    <br><br>

        

        
</div>    

    
</div>
</div>